{% extends '_base_double_screen.html' %}
{% load bootstrap3 %}
{% load static %}
{% load i18n %}


{% block content %}
    <div class="col-lg-12">
        <div class="col-lg-6">
            <div class="ticket-container">
                <h2 class="font-bold" style="display: inline-block">{% trans 'Ticket information' %}</h2>
                {% for child in content %}
                    <div class="card">
                        <h2 class="child_title">{{ child.title }}</h2>
                        {% for item in child.content %}
                            <p class="field-group">
                                <span class="field-name"><strong>{{ item.title }}:</strong></span>
                                <span class="field-value">{{ item.value }}</span>
                            </p>
                        {% endfor %}
                    </div>
                {% endfor %}
            </div>
        </div>
        <div class="col-lg-6">
            <div class="ibox-content">
                <img src="{{ INTERFACE.logo_logout }}" style="margin: auto" width="50" height="50">
                <h2 class="font-bold" style="display: inline">{% trans 'Ticket approval' %}</h2>
                <h1></h1>
                <div class="ibox-content">
                    <p>
                        {% trans 'Hello' %} {{ user.name }},
                    </p>
                    <p style="text-indent: 3em">
                        {{ prompt_msg }}
                    </p>
                    <br>
                    <form id="approve-form" action="" method="post" role="form" novalidate="novalidate">
                        {% csrf_token %}
                        <div class="form-group pull-right" style="">
                            <button class="btn-small btn-primary m-b" name="action" value="approve"
                                    type="submit">
                                {% trans 'Approval' %}
                            </button>
                            <button class="btn-small btn-danger m-b" name="action" value="reject"
                                    type="submit">
                                {% trans 'Reject' %}
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <style>
        .font-bold {
            margin: 24px 0 0 24px
        }

        .ticket-container {
            flex-shrink: 0;
            border-radius: 4px;
            background: #FFF;
            font-style: normal;
            font-weight: 400;
            line-height: 24px; /* 150% */


            .card {
                .child_title {
                    padding-top: 16px;
                    margin: 0 0 12px 16px;
                    display: inline-flex;
                    flex-direction: column;
                    align-items: flex-start;
                    color: #1F2329;
                    font-size: 16px;
                    font-style: normal;
                    font-weight: 500;
                }

                @media (max-width: 400px) {
                    margin: 8px
                }
                margin: 24px 0 0 24px;
                width: 95%;
                display: inline-block;
                border-radius: 4px;
                background: #F5F6F7;
            }

            .card:last-child {
                margin-bottom: 24px;
            }

            .field-group {
                font-size: 14px;
                padding-inline-start: 0;
                margin: 0;
                width: 95%;

                .field-name {
                    margin: 4px 0 4px 16px;
                    color: #646A73;
                    display: inline-block;

                    :is(strong) {
                        font-weight: 400 !important;
                    }
                }

                .field-value {
                    color: #1F2329;
                    display: inline-block;
                }
            }
        }
    </style>
{% endblock %}
